/*
 * @Description: 车检主页
 * @Author:shuaishuai.wang
 * @Date: 2019-07-09 18:03:07
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-07-18 11:04:22
 */
<template>
  <div
    class="main fontsize32"
    ref="main"
    v-if="pageState"
  >
    <!--将页面内容包含其中，在弹窗出现时实现页面不可滑动效果-->
    <div class="main_info">
      <div
        @click="goBack"
        class="go_home"
      >
        <i class="iconfont icon-back"></i>
      </div>
      <banner
        height="4.8rem"
        :autoplay="true"
        :bannerEnName="bannerName"
        style="min-height: 4.8rem"
      ></banner>
      <!--暂时弃用，待后台完成后启用-->
      <!-- 临时占位，替代顶部轮播图片
      <div class="occupied"></div> -->
      <!--嘉定汽车检查站信息-->
      <div class="info">
        <div class="basic flex-h flex-vc">
          <div class="left_img">
            <img src="./../assets/img/logo-jd.png">
          </div>
          <div class="basic_info fontsize28">
            <h3>上海嘉定汽车综合检测站有限公司</h3>
            <p @click="goToPosition">上海市嘉定区宝凤路518号<i class="iconfont icon-rightangel fontsize28"></i></p>
          </div>
        </div>
        <div class="time flex-h flex-vc fontsize28">
          <p class="title">营业时间：</p>
          <div class="bucker fontsize24">
            <p>周一至周六<span>(除法定节假日)</span></p>
            <p>8:00-11:30 12:00-16:30</p>
          </div>
        </div>
        <div class="other flex-h fontsize32">
          <div class="phone flex-h flex-vc">
            <a href="tel:021-39978958"><i class="phone icon iconfont icon-phone fontsize32"></i>021-39978958</a>
          </div>
          <div
            class="need_to_know flex-h flex-vc"
            @click="goToNeedToKnow"
          >
            <i class="icon iconfont icon-record fontsize32"></i>
            <span>预约须知</span>
          </div>
        </div>
      </div>
      <!-- 功能区域 -->
      <div class="guide_area">
        <h2 class="fontsize38">服务指南</h2>
        <div
          class="guides"
          :style="{height: guidesHeight}"
        >
          <div
            class="guide"
            v-for="(guide, index) in guides"
            :key="index"
            @click="guidesClick(index)"
          >
            <img :src="guide.img">
            <div class="character">
              <h4>{{guide.name}}</h4>
              <p class="fontsize24">{{guide.introduce}}</p>
            </div>
          </div>
          <div class="empty_area"></div>
        </div>
      </div>
    </div>
    <!-- 点击综合检测预约的弹窗 -->
    <full-screen-cover
      v-show="coverOpention.state"
      @clickBackground="closeCover"
    >
      <div class="confirm_violation">
        <h2 class="fontsize40">预约引导</h2>
        <div class="btn_area">
          <button
            @click="trafficViolationsInquiry"
            class="fontsize32"
          >违章查询</button>
          <button
            @click="goToAppointment"
            class="go_appoinment fontsize32"
            :class="{'can_not_go': !chooseState}"
          >进入预约</button>
        </div>
        <div class="select_area fontsize24">
          <p><i
              class="iconfont icon-choose"
              :class="{'choose_icon': chooseState}"
              @click="chooseState=!chooseState"
            ></i>已确认无未处理违章记录</p>
        </div>
      </div>
    </full-screen-cover>
    <!--扫码方式 -->
    <picker-way
      :pickerOption='pickerOption'
      @submitClick="chooseScanWay"
    ></picker-way>
  </div>
</template>
<script>
import { Banner, FullScreenCover, PickerWay } from 'vue-xb-ui-depot'
import { AppRouterUtils } from 'vue-xiaobu-utils'
export default {
  data() {
    return {
      pageState: true, // 页面加载状态
      bannerName: window.APP_VEHICLE_DETAIL,
      guides: [ // 服务指南区域现有服务数据
        {
          img: require('./../assets/img/annual.png'),
          name: '非营运车辆预约',
          introduce: '主要针对非营运车辆的车辆年检'
        }, {
          img: require('./../assets/img/comprehensive.png'),
          name: '营运车辆预约',
          introduce: '包含车辆年检、综合检测以及三检合一'
        }, {
          img: require('./../assets/img/violation.png'),
          name: '违章查询',
          introduce: '快速查询车辆违章信息'
        }, {
          img: require('./../assets/img/pay.png'),
          name: '车检缴费',
          introduce: '快捷支付车检所需费用'
        }
      ],
      guidesHeight: '',
      pickerOption: { // 选择扫码方式的相关数据
        closeBtn: true,
        closeBtnLeft: true,
        pickerCover: false,
        name: '车检缴费',
        // remark: '*乘公交时，将根据所选项跳转至对应的第三方应用程序', // 该值为空或不存在，隐藏该区域
        btnText: '确定', // 该值为空或不存在，隐藏该区域
        withoutSelectIcon: false,
        pickerList: [/* {
          name: '银联云闪付',
          img: require('./../assets/unionpay.png'),
          url: 'https://www.baidu.com',
          selected: false
        }, */ {
            name: '支付宝',
            img: require('./../assets/img/alipay.png'),
            url: '',
            selected: false
          }/* , {
            name: '微信',
            img: require('./assets/img/wechat.png'),
            url: '',
            selected: false
          } */]
      },
      coverOpention: {
        state: false // 控制弹窗状态
      },
      chooseState: false // 是否勾选已确认无未处理违章记录
    }
  },
  components: {
    Banner,
    FullScreenCover,
    PickerWay
  },
  mounted() {
    this.pageState = true
    this.getGuidesHeight()
  },
  methods: {
    openCover() { // 打开弹窗
      this.coverOpention.state = true
    },
    removeEvent() {
      window.removeEventListener('popstate', this.addEvent, false) // false阻止默认事件
    },
    guidesClick(index) { // 对指南里模块点击事件的配置
      switch (index) {
        case 0:
          this.openCover()
          break
        case 1:
          AppRouterUtils.open('operateAppointment.html?_tv=false&_rv=false')
          break
        case 2:
          this.trafficViolationsInquiry()
          break
        case 3:
          this.pickerOption.pickerCover = true
      }
    },
    trafficViolationsInquiry() { // 跳转至违章查询网页
      AppRouterUtils.open('https://sh.122.gov.cn/#/inquiry')
    },
    goToAppointment() { // 是否勾选车辆暂无处理违章事件并执行对应操作
      if (this.chooseState) {
        AppRouterUtils.open('privateAppointment.html?_tv=false&_rv=false')
      }
    },
    goToPosition() { // 跳转至车站位置也
      AppRouterUtils.open('vehiclePosition.html?_tv=false&_rv=false')
    },
    goToNeedToKnow() { // 跳转至预约须知页
      AppRouterUtils.open('vehicleNeedToKnow.html?_tv=false&_rv=false')
    },
    chooseScanWay(index) {
      // window.location.href = this.pickerOption.pickerList[index].url)
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.openPay(() => {
          this.pickerOption.pickerCover = false // 成功唤起关闭选择框
        },
        () => {

        },
        index
        )
      })
    },
    goBack() { // 点击左上方返回按钮返回首页
      AppRouterUtils.goHome()
    },
    getGuidesHeight() { // 获取服务指南区域高度
      this.guidesHeight = document.querySelector('.menu').offsetTop - (4 * parseFloat(document.getElementsByTagName('html')[0].style.fontSize)) - document.querySelector('.guides').offsetTop + 'px'
      console.log(this.guidesHeight)
    },
    closeCover() { // 关闭弹窗清空勾选状态
      this.coverOpention.state = false
      this.chooseState = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import './../../common.scss';
html,
body {
  overflow: hidden;
}
.main {
  height: 100%;
  position: relative;
  background-color: $bgColorResult;
  min-height: fill-available;
  font-family: PingFangSC-Medium;
  font-weight: 400;
  overflow: hidden;
  .main_info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    .go_home {
      width: 48px;
      height: 48px;
      border-radius: 25px; /*no*/
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      top: 100px;
      left: 32px;
      z-index: 1;
      text-align: center;
      line-height: 48px;
      i {
        color: #fff;
      }
    }
    /* 占位区域样式 */
    .occupied {
      width: 750px;
      height: 360px;
      background-color: brown;
    }
    /* 车检所基本信息区域 */
    .info {
      width: 622px;
      margin: auto;
      margin-top: -90px;
      border-radius: 5px; /*no*/
      box-shadow: $boxShadow; /*no*/
      padding: 0 32px;
      background-color: $bgColorDiv;
      position: relative;
      .basic {
        padding: 28px 0;
        display: flex;
        .left_img {
          width: 80px;
          height: 80px;
          margin-right: 24px;
          img {
            width: 100%;
          }
        }
        .basic_info {
          h3 {
            height: 44px;
            font-weight: 800;
            color: $fontColorMajor;
            line-height: 44px;
          }
          p {
            height: 30px;
            color: $fontColorSecond;
            line-height: 30px;
            margin-top: 6px;
          }
        }
      }
      .time {
        padding: 16px 0;
        color: $fontColorSecond;
        border-top: 1px solid #eeeeee; /*no*/
        .title {
          width: 150px;
        }
        .bucker {
          span {
            color: $fontColorMini;
          }
        }
      }
      .other {
        padding: 22px 0;
        border-top: 1px solid #eeeeee; /*no*/
        .phone {
          color: $themeColors;
          margin-right: 32px;
        }
        a {
          color: $themeColors;
        }
        .need_to_know {
          border-left: 1px solid #eee; /*no*/
          padding-left: 75px;
          i {
            color: $themeColors;
            margin-right: 32px;
          }
          span {
            color: $themeColors;
          }
        }
      }
    }
    /* 服务指南区域 */
    .guide_area {
      margin-top: 18px;
      padding: 32px;
      h2 {
        font-weight: 500;
        margin-bottom: 28px;
      }
      .guides {
        margin-top: 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .guide {
          display: flex;
          margin-top: 20px;
          background-color: $bgColorDiv;
          padding: 32px;
          border-radius: 4px; /*no*/
          img {
            width: 80px;
            height: 80px;
            margin-right: 32px;
          }
          .character {
            height: 80px;
            h4 {
              height: 44px;
              line-height: 44px;
            }
            p {
              color: $fontColorMini;
            }
          }
        }
      }
    }
    .empty_area {
      height: 108px;
    }
  }

  /*弹窗区域*/
  .confirm_violation {
    width: 476px;
    height: fit-content;
    margin: auto;
    padding: 32px;
    border-radius: 4px; /*no*/
    position: absolute;
    background-color: $bgColorDiv;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: inherit;
    h2 {
      text-align: center;
    }
    .select_area {
      margin-top: 32px;
      i {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: #fff;
        background-color: #ccc;
        margin-right: 16px;
        transition: all 0.5s;
        border-radius: 4px; /*no*/
      }
      .choose_icon {
        background-color: $themeColors;
      }
      p {
        height: 40px;
        line-height: 40px;
      }
    }
    .btn_area {
      width: 476px;
      margin-top: 32px;
      button {
        width: 100%;
        height: 72px;
        color: $fontColorWhite;
        border-radius: 25px; /*no*/
        border: 0;
        background-color: #1890ff;
      }
      .go_appoinment {
        background-color: $themeColors;
        margin-top: 48px;
        transition: all 0.5s;
      }
      .can_not_go {
        background-color: #ccc;
      }
    }
  }
}
</style>
